<template>
  <el-scrollbar>
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      unique-opened
      @select="handleSelect"     
      :default-active="activePath"
      router
    >
      <sildeMenuItem
        v-for="(item, index) in menuList"
        :data="item"
        :key="item.id"
      ></sildeMenuItem>
    </el-menu>
  </el-scrollbar>
</template>
<script setup>
import sildeMenuItem from "@/components/common/sildeMenuItem.vue";
import { computed, ref, onMounted,watch } from "vue";
import { mapWritableState, storeToRefs } from "pinia";
import { useGlobalMenuStore } from "@/store/menuGlobalStore";
import { useRouter } from "vue-router";
const router = useRouter();
// const { menuList } = mapWritableState(useGlobalMenuStore,['menuList'])
let { menuList } = storeToRefs(useGlobalMenuStore());
const handleSelect = (index, indexPath) => {
};
// 是否展开菜单
const isCollapse = ref(false);
// 默认激活的菜单项
let activePath = ref("/");
watch(()=>router.currentRoute.value.path,(newVal)=>{
  activePath.value = newVal;
},{immediate:true})

</script>
<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 500px;
}
</style>
